<template>
  <!-- 底部导航 -->
  <div id="nav" v-if="$route.meta.isFooter">
    <router-link class="tab-bar-item" to="/">
      <div class="icon-box"><i class="icon iconfont icon-shouye4"></i></div>
      <div>首页</div>
    </router-link>
    <!-- <router-link class="tab-bar-item" to="/category">
      <div class="icon-box"><i class="icon iconfont icon-fenlei"></i></div>
      <div>分类</div>
    </router-link> -->
    <!-- <router-link class="tab-bar-item" to="/cart">
      <div class="icon-box">
        <van-badge :offset="[0, 7]" :content="cartStore.validTotal" max="90">
          <i class="icon iconfont icon-gouwuche"></i>
        </van-badge>
      </div>
      <div>购物车</div>
    </router-link> -->
    <router-link class="tab-bar-item" to="/chat">
      <div class="icon-box"><i class="icon iconfont icon-kefu2"></i></div>
      <div>聊天</div>
    </router-link>
    <router-link class="tab-bar-item" to="/me">
      <div class="icon-box"><i class="icon iconfont icon-wode"></i></div>
      <div>我的</div>
    </router-link>
  </div>

  <!-- 主体内容 -->
  <router-view/>
</template>

<script setup lang="ts">
import { useCartStore } from '@/store/modules/cart'

// 购物车存储
const cartStore = useCartStore()
</script>

<style lang="scss">
@import "assets/css/base.css";
#nav {
    background-color: #F6F6F6;
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -3px 1px rgba(100, 100, 100, 0.1);
    a {
      color: var(--color-text);

      &.router-link-exact-active {
        color: #27BA9B;
      }
    }
    .tab-bar-item {
      flex: 1;
      text-align: center;
      height: 50px;
      font-size: var(--font-size);
      .icon-box{
        width: 24px;
        height: 24px;
        margin-top: 3px;
        vertical-align: middle;
        display: inline-block;
        .icon {
          font-size: 24px;
        }
      }
    }
  }

  .ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
